<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>01-案例-v-show指令</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <style>

        .box {
            width: 100px;
            height: 100px;
            background-color: #369;
            margin: 20px;
            font-size: 20px;
            font-weight: 700;
        }

        button {
            outline: none !important;
            margin: 0 20px;
        }

        /* .none {
            display: none;
        } */

        .cls {
            background-color: deeppink;
        }

    </style>
</head>
<body>
    <!-- 
        总结：
            a. 传统写法需要手动操作dom的display属性，切换显示和隐藏
            b. 使用 v-show 可以通过传入布尔值直接控制元素的显示和隐藏
            c. v-show 对应的值不一定非得是直接的布尔值，还可以为其他的表达式
            d. v-show 应用于频繁切换的显示效果
     -->
    <div id="app">
        <div class="container">
            <h3>案例-切换元素显示</h3>
            <hr>
            <!-- <button class="btn btn-warning" @click="bool = !bool">切换盒子显示</button> -->
            <button class="btn btn-warning" @click="num++">切换盒子显示</button>

            <!-- 传统写法操作元素的显示和隐藏 -->
            <!-- <div class="box" :class="{ none: bool }"></div> -->

            <!-- v-show 的写法 -->
            <!-- <div class="box" v-show="bool"></div> -->

            <!-- <div class="box" v-show="bool">1</div>
            <div class="box cls" v-show="!bool">2</div> -->

            <div class="box" v-show="num % 2 !== 0">1</div>
            <div class="box cls" v-show="num % 2 === 0">2</div>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        const vm = new Vue({
            el: '#app',
            data: {
                bool: true,
                num: 0
            },
        })
    </script>
</body>
</html>